<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片浏览器</title>
    <!--导入jquery分页插件-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jqPaginator.css">

    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/jqPaginator.js"></script>
    <script src="js/getParameter.js"></script>
    <script src="js/masonry.pkgd.min.js"></script>



</head>
<body>
<a href="random.html">随机图片</a>
<div align="center">
<div class="pageNum">
    <ul class="pagination">

    </ul>
</div>

<div class="grid">
    <div class="grid-item">...</div>
    <div class="grid-item grid-item--width2">...</div>
    <div class="grid-item">...</div>
</div>

<div align="center">图片</div>
<div class="image" id="imageList"  style="align-items: center">

</div>

<div class="pageNum">
    <ul class="pagination">

    </ul>
</div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        changePage(1,type);
        var type = "size";
        $('.grid').masonry({
            // options...
            itemSelector: '.grid-item',
            columnWidth: 200
        });
    });
    function changePage(current,type){
        $.get({
            url:"getImage",
            data:{
                action:"getImage",
                current:current,
                type:type
            },
            success:function (pageBean) {
                var html="";
                var images=pageBean.data;
                for (var image of images) {
                    html+=" <image src=\"/telegram/"+image.name+"\"></image>\n" +
                        "    <p>&nbsp;</p>";
                }
                $("#imageList").html(html);
                $("ul.pagination").jqPaginator({
                    totalCounts: pageBean.count,  //总条数
                    pageSize: pageBean.size,  //每页大小
                    currentPage: current, //当前页
                    //点击页面事件
                    onPageChange: function (num, type) {
                        if (type == "change") {
                            //再次访问服务器，查询新的一页数据
                            changePage(num);  //num就是要查询页面
                        }
                    }
                });
            }
        })
    }

</script>
</html>